<template lang="html">
  <div class="">

      <div class="tab1" v-loading="loading">
          <div class="title">{{title}}角色</div>
          <div class="form">
            <div class="form_item">
                <span> <i>*</i> 角色名称</span>
                <el-input v-model="form.roleName" placeholder="请填写角色名称"></el-input>
            </div>
            <div class="form_item">
                <span style="line-height: 60px"> <i style="visibility:hidden">*</i> 模块选择</span>
                <div class="role_table">
                    <div class="row" v-for="(item,index) in menuList" :key="item.id">
                        <div class="th"><el-checkbox v-model="item.checkState" @change="parentCheck(item)">{{item.name}}</el-checkbox></div>
                        <div class="td">
                          <el-checkbox v-for="m in item.menuList" :key="m.id" v-model="m.checkState" @change="childCheck(m)">{{m.name}}</el-checkbox>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form_item">
                <span>角色描述</span>
                <el-input type="textarea" :rows="4" v-model="form.content"></el-input>
            </div>
          </div>
          <div class="submit_form">
              <el-button type="primary" size="medium" @click="submit">提交</el-button>
          </div>
      </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      form:{},
      resources: [],
      menuList: [],
      role:{},
      menuData: [],
    }
  },
  computed:{
    title:function(){
      return this.$route.query.id?'编辑':'新增';
    }
  },
  beforeRouteEnter(to, from, next){
    next(vm=>{
      vm.$route.meta.title = vm.title;
    });
  },
  created(){
    this.selectMenuList();
  },
  methods: {
    async selectRole(){
      let id = this.$route.query.id;
      if(!id) return false;
      let res = await this.$http.selectRole({id});
      if(res.data.code==0){
        this.resources = Object.assign([], res.data.data.resources);
        this.$set(this.form,'roleName',res.data.data.role.roleName);
        this.$set(this.form,'content',res.data.data.role.content);
        this.concatRoleMenu();
        this.$forceUpdate();
      }
    },
    concatRoleMenu(){
      this.menuList.forEach((menu,i)=>{
        this.resources.forEach(item=>{
          if(menu.id == item.id){
            menu.checkState = true;
            return;
          }
        });
      });
      this.menuList.forEach(menu=>{
        menu.menuList.forEach(item=>{
          this.resources.forEach(res=>{
            if(item.id == res.id){
              item.checkState = true;
              return;
            }
          });
        })
      });
      this.menuList.forEach(menu=>{
        if(menu.checkState){
          this.menuData.push(menu.id)
        }
        menu.menuList.forEach(item=>{
          if(item.checkState){
            this.menuData.push(item.id)
          }
        });
      });
    },
    selectMenuList(){
      this.loading = true;
      this.$http.selectMenuList().then(res=>{
        this.loading = false;
        this.menuList =Object.assign([], res.data.data);
        this.menuList.forEach(menu=>{
          menu.menuList.forEach(item=>{
            item.checkState = false;
          });
          menu.checkState = false;
        });
        this.selectRole();
      });
    },
    parentCheck(e){
      if(e.checkState){
        this.menuData.push(e.id);
      }else{
        this.menuData = this.menuData.filter(item=>item.id !== e.id);
      }
      this.$forceUpdate();
    },
    childCheck(e){
      if(e.checkState){
        this.menuData.push(e.id);
      }else{
        this.menuData = this.menuData.filter(item=>item.id !== e.id);
      }
      this.$forceUpdate();
    },
    insertRole(){
      this.$http.insertRole({
        roleName:this.form.roleName,
        resourceIds: this.menuData.join(','),
        content:this.form.content
      }).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.$router.push('/system/role/list');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    updateRole(){
      this.$http.updateRole({
        id: this.$route.query.id,
        roleName:this.form.roleName,
        resourceIds: this.menuData.join(','),
        content:this.form.content
      }).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.$router.push('/system/role/list');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    submit(){
      if(!this.form.roleName){
        this.$message.error('请填写角色名称！');
        return false;
      }
      // if(this.menuData.length == 0){
      //   this.$message.error('至少选择一个模块！');
      //   return false;
      // }
      this.loading = true;
      if(this.$route.query.id){
        this.updateRole();
      }else{
        this.insertRole();
      }
    },

  }
}
</script>

<style lang="css" scoped>
i{font-style: normal;color: #FB3F3F}
.tab1{
  background: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #E8E8E8;
}
.form{
  width: 80%;
  padding: 20px 0;
  margin-left: 50px;
}
.form .form_item{
  display: flex;
  /* align-items: center; */
  margin-bottom: 15px;
}
.form .form_item span{
  width: 80px;
  font-size: 13px;
  color: #333333;
  text-align: right;
  margin-right: 10px;
  line-height: 32px;
}
/deep/.form .el-input{
  width: 100%;
}
/deep/.el-checkbox{
  line-height: 30px;
}
/deep/.el-input--small .el-input__inner{
  width: 250px;
}
.title{
  width: 100%;
  color: #4196FF;
  padding: 12px 15px;
  background-color:#DAEBFF;
  box-sizing: border-box;
}
.role_table{
  width: 100%;
  border-top:1px solid #DCDFE6;
  border-left:1px solid #DCDFE6;
}
.role_table .row{
  width: 100%;
  display: flex;
  align-items: stretch;
}
.role_table .th{
  width: 20%;
  padding: 15px 0;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #DCDFE6;
  border-right: 1px solid #DCDFE6;
}
.role_table .td{
  width: 80%;
  padding: 15px 0;
  padding-left: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #DCDFE6;
  border-right: 1px solid #DCDFE6;
}
.submit_form{
  margin-top: 20px;
  padding-left: 130px;
  margin-bottom: 30px;
}
</style>
